<template>
  <div class="b_color p_20">
    <el-row>
      <el-col :span="6" :offset="16" class="p_20">
        <el-steps
          :space="200"
          :active="active"
          finish-status="success"
          style="text-align: left; margin-top: 50px"
        >
          <el-step title="步骤 1" style="font-size: 5px"></el-step>
          <el-step title="步骤 2"></el-step>
          <el-step title="步骤 3"></el-step>
        </el-steps>
      </el-col>
    </el-row>
    <el-row>
      <el-col
        :span="20"
        :offset="2"
        style="border: 1px solid rgba(0, 0, 0, 0.1); font-size: 5px"
      >
        <!-- 收件人信息 标题和添加按钮 -->
        <el-row>
          <el-col
            :span="4"
            :offset="2"
            style="
              font-weight: bold;
              font-size: 15px;
              margin: 10px 0px;
              text-align: center;
            "
            >收货人信息</el-col
          >
          <el-col :span="2" :offset="16">
            <el-button type="text" @click="dialogVisible = true"
              >添加收货人</el-button
            >
            <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
              <el-form
                ref="addForm"
                :model="addForm"
                :rules="rules"
                label-width="80px"
              >
                <el-form-item label="收件人" prop="username">
                  <el-input v-model="addForm.username"></el-input>
                </el-form-item>
                <el-form-item label="手机号" prop="phone">
                  <el-input v-model="addForm.phone"></el-input>
                </el-form-item>
                <el-form-item label="邮政编码" prop="postcode">
                  <el-input v-model="addForm.postcode"></el-input>
                </el-form-item>
                <el-form-item label="地区" prop="address">
                  <el-cascader
                    style="width: 100%"
                    size="large"
                    :options="options"
                    v-model="selectedOptions"
                    @change="handleChangeAddress"
                  >
                  </el-cascader>
                </el-form-item>
                <el-form-item label="详细地址" prop="address1">
                  <el-input v-model="addForm.address1"></el-input>
                </el-form-item>
              </el-form>
              <span slot="footer" class="dialog-footer">
                <el-button
                  @click="(dialogVisible = false), resetForm('addForm')"
                  >取 消</el-button
                >
                <el-button type="primary" @click="putAddress">确 定</el-button>
              </span>
            </el-dialog>
          </el-col>
        </el-row>
        <!-- 选择收件地址 -->
        <el-row>
          <el-col :span="20" v-for="(item, index) in address" :key="index">
            <el-row v-if="index == indexId || isIndex">
              <el-col
                :span="6"
                :offset="1"
                style="line-height: 50px; height: 50px"
                ><el-radio v-model="radio" :label="index" border size="mini"
                  >{{ item.receiverName }} {{ item.receiverProvince }}</el-radio
                ></el-col
              >
              <el-col
                :span="14"
                class="addresslist"
                style="line-height: 50px; height: 50px"
              >
                <span>{{ item.receiverName }}</span>
                <span>{{ item.receiverProvince }}</span>
                <span>{{ item.receiverCity }}</span>
                <span>{{ item.receiverRegion }}</span>
                <span>{{ item.receiverDetailAddress }}</span>
                <span>{{ item.receiverPhone }}</span>
                <span
                  v-if="index == 0"
                  style="
                    background-color: rgba(0, 0, 0, 0.4);
                    color: white;
                    padding: 5px;
                  "
                  >默认地址</span
                >
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        <!-- 展示更多按钮 -->
        <el-row>
          <el-col :span="2" :offset="1"
            ><el-button size="mini" type="text" @click="handleChangeIndex">{{
              indexName
            }}</el-button></el-col
          >
        </el-row>
        <!-- 分割线 -->
        <el-row>
          <el-col :span="20" :offset="2"><el-divider></el-divider></el-col>
        </el-row>
        <!-- 支付方式标题 -->
        <el-row>
          <el-col
            :span="3"
            style="
              font-weight: bold;
              font-size: 15px;
              margin: 10px 0px;
              text-align: center;
            "
            >支付方式</el-col
          >
        </el-row>
        <!-- 支付方式选择按钮 -->
        <el-row>
          <el-col :span="6" :offset="1" style="line-height: 50px; height: 50px"
            ><el-radio v-model="payradio" :label="payradio" border size="mini"
              >支付宝</el-radio
            ></el-col
          >
          <el-col
            :span="14"
            style="line-height: 50px; height: 50px; text-align: start"
          >
            <span style="font-size: 5px; color: rgba(0, 0, 0, 0.2)"
              >暂不支持其他支付方式</span
            >
          </el-col>
        </el-row>
        <!-- 分割线 -->
        <el-row>
          <el-col :span="20" :offset="2"><el-divider></el-divider></el-col>
        </el-row>
        <!-- 购物清单标题和修改购物车按钮 -->
        <el-row>
          <el-col
            :span="3"
            style="
              font-weight: bold;
              font-size: 15px;
              margin: 10px 0px;
              text-align: center;
            "
            >送货清单</el-col
          >
          <el-col :span="4" :offset="16">
            <el-link
              style="line-height: 50px; height: 50px"
              :underline="false"
              @click="handleGoBackCar"
              >修改购物车</el-link
            >
            <!-- href="/shop_s" -->
          </el-col>
        </el-row>
        <el-row>
          <!-- 配送方式 -->
          <!-- <el-col
            :span="8"
            :offset="1"
            style="background-color: rgba(0, 0, 0, 0.1); height: 500px"
          >
            
            <el-row>
              <el-col
                :span="6"
                style="
                  height: 50px;
                  line-height: 50px;
                  font-size: 10px;
                  font-weight: bold;
                "
                >配送方式</el-col
              >
            </el-row>
          </el-col> -->
          <!-- 清单列表 -->
          <el-col :span="20">
            <!-- 清单标题 -->
            <el-row>
              <el-col
                :span="5"
                :offset="1"
                style="font-weight: bold; line-height: 50px"
                >商家：京东</el-col
              >
            </el-row>
            <!-- 清单列表 -->
            <el-row style="height: 400px">
              <el-col :offset="1" v-for="(items, index) in goods" :key="index">
                <el-row>
                  <el-col class="orderGoods" :span="4">
                    <img
                      :src="
                        'http://42.194.142.165:8088/sharePath/' + items.image
                      "
                      alt=""
                    />
                  </el-col>
                  <el-col :span="11" style="margin-top: 10px">
                    <el-row
                      :title="items.title"
                      style="text-align: start; font-weight: bold"
                      >{{ items.title }}</el-row
                    >
                    <el-row class="">
                      <el-row :title="items.attrs" style="text-align: start">{{
                        items.attrs
                      }}</el-row>
                    </el-row>
                    <el-row>
                      <el-col :span="2"><i class="el-icon-sell"></i></el-col>
                      <el-col :span="10">支持七天无理由退款</el-col>
                    </el-row>
                  </el-col>
                  <el-col :span="5" class="orderGoods">
                    ￥{{ items.price }}
                  </el-col>
                  <el-col :span="2" class="orderGoods">
                    ×{{ items.count }}
                  </el-col>
                  <el-col :span="2" class="orderGoods"> 有货 </el-col>
                </el-row>
              </el-col>
            </el-row>
            <!-- 提交订单按钮 -->
            <el-row>
              <el-col
                :span="3"
                :offset="21"
                style="height: 100px; line-height: 100px"
              >
                <el-button size="mini" type="warning" @click="handleSubmit"
                  >提交订单</el-button
                >
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { regionData, CodeToText } from "element-china-area-data";

export default {
  name: "",
  data() {
    var checkMobile = (rule, value, callback) => {
      const regMobile = /^(0|86|17951)?(13[0-9]|15[0123456789]|17[678]|18[0-9]|14[57])[0-9]{8}$/;
      if (regMobile.test(value)) {
        return callback();
      }
      callback(new Error("请输入合法的手机号"));
    };
    return {
      options: regionData,
      dialogVisible: false,
      addForm: {
        username: "",
        phone: "",
        postcode: "",
        address: "",
        address1: "",
      },

      rules: {
        username: [
          { required: true, message: "请输入收货人名称", trigger: "blur" },
          {
            min: 3,
            max: 10,
            message: "长度在 3 到 10 个字符",
            trigger: "blur",
          },
        ],
        phone: [
          { required: true, message: "请输入收货人名称", trigger: "blur" },
          {
            validator: checkMobile,
            trigger: "blur",
          },
        ],
        postcode: [
          { required: true, message: "请输入邮政编码", trigger: "blur" },
          {
            min: 6,
            message: "长度在最小6位",
            trigger: "blur",
          },
        ],
        address: [{ required: true, message: "请选择地址", trigger: "blur" }],
        address1: [
          { required: true, message: "请填写详细地址", trigger: "blur" },
        ],
      },
      selectedOptions: [],

      goods: [],
      address: [],
      payPrice: "",
      note: "",
      radio: 0,
      payradio: 1,
      indexId: 0,
      indexName: "显示更多",
      isIndex: false,
      active: 1,
    };
  },
  props: {
    showOrder: Object,
  },
  components: {},
  methods: {
    // 渲染地址
    showAddressList() {
      this.$axios
        .get("/order", {})
        .then((res) => {
          console.log(res);
          if (res.data.meta.status !== 200) {
            return this.$message.error("获取订单失败!");
          } else {
            console.log(res);
            if (res.data.data !== null) {
              res.data.data.address.forEach((element) => {
                element.receiverPhone = this.handlePhone(element.receiverPhone);
              });
            }
            window.sessionStorage.setItem(
              "orderToken",
              res.data.data.orderToken
            );
            this.address = res.data.data.address;
            this.goods = res.data.data.items;
            this.payPrice = res.data.data.payPrice;
          }
        })
        .catch((res) => {
          console.log(res);
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 添加地址
    putAddress() {
      this.$axios
        .post("receiver", {
          receiverName: this.addForm.username,
          receiverPhone: this.addForm.phone,
          receiverPostCode: this.addForm.postcode,
          receiverProvince: CodeToText[this.addForm.address[0]],
          receiverCity: CodeToText[this.addForm.address[1]],
          receiverRegion: CodeToText[this.addForm.address[2]],
          receiverDetailAddress: this.addForm.address1,
        })
        .then((res) => {
          if (res.data.meta.status !== 200) {
            return this.$message.error("添加收件人信息失败!");
          }
          this.$message.success("添加收件人信息成功!");
          this.showAddressList();
          this.dialogVisible = false;
          console.log(this.addForm);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 三级地址附带方法
    handleChangeAddress(value) {
      console.log(
        CodeToText[value[0]] +
          "," +
          CodeToText[value[1]] +
          "," +
          CodeToText[value[2]]
      );
      this.addForm.address = value;
    },
    // 隐藏手机号中间4位数
    handlePhone(phone) {
      if (phone !== null) {
        return phone.substr(0, 3) + "****" + phone.substr(7);
      }
      return false;
    },
    // 显示按钮逻辑
    handleChangeIndex() {
      if (this.isIndex) {
        this.indexName = "显示更多";
        this.isIndex = false;
        this.indexId = this.radio;
      } else {
        this.indexName = "隐藏显示";
        this.isIndex = true;
        this.indexId = this.radio;
      }
    },
    // 提交订单 调用支付方法
    async handleSubmit() {
      if (
        this.address == null ||
        this.address.length == 0 ||
        this.address == ""
      ) {
        return this.$message.error("请填写收货地址");
      }
      const { data: res } = await this.$axios.post("order/confirm", {
        addrId: this.address[this.radio].id,
        payType: 1,
        orderToken: window.sessionStorage.getItem("orderToken"),
        payPrice: this.payPrice,
        note: this.note,
      });
      console.log(res);
      if (res.meta.status == 200) {
        this.handlePay(res.data.orderSn, res.data.payPrice);
        this.$router.push("/index");
      } else if (res.meta.status == 501) {
        this.$router.push("login");
        return this.$message.error("请先登录！");
      } else {
        return this.$message.error("提交失败!");
      }
    },
    // 支付
    async handlePay(orderSn, payPrice) {
      console.log(orderSn + "," + payPrice);
      window.open(
        "http://42.194.142.165:8088/front/mi/api/pay/order?orderSn=" +
          orderSn +
          "&payPrice=" +
          payPrice,
        "_blank"
      );
    },
    handleGoBackCar() {
      this.$router.push("/shopCar");
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    // 无限下拉每次增加数量
  },
  created() {
    this.showAddressList();
  },
};
</script>

<style scoped>
.b_color {
  background-color: white;
}
.p_20 {
  padding-bottom: 20px;
}
.addresslist {
  text-align: start;
}
.addresslist span:first-child {
  margin-right: 10px;
}
.addresslist span {
  height: 50px;
  margin-left: 10px;
}
.orderGoods {
  height: 100px;
  line-height: 100px;
}
.orderGoods img {
  height: 100%;
  width: 100%;
}
.orderGoodlist {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
